import React, { useEffect, useState,useTransition } from 'react'
import {Button, Card,Tooltip} from 'antd'
import { useNavigate } from 'react-router-dom';
import { reportLists } from '@/api/modules/report'
import useCacheAlive from '@/hooks/useCacheAlive'
import MemoTable from '@/components/MemoTable';
import { useTranslation } from 'react-i18next';

const History = () => {
  const navigate = useNavigate();
  const { t } = useTranslation()
  const [onReloadNum,setOnReloadNum] = useState(null)
  const formColumns = []

  const columns: any = [
    {
      title: t('history.createTime'),
      dataIndex: ['product','updateTime'],
      key: 'product.updateTime',
      width:80,
      fixed:'left',
      ellipsis: {
        showTitle: false,
      },
      render: (updateTime) => (
        <Tooltip placement="topLeft" title={updateTime}>
          {updateTime}
        </Tooltip>
      ),
    },
    {
      title:t('history.ownerName'),
      dataIndex: ['product','ownerName'],
      key: 'product.ownerName',
      width:100,
      fixed:'left',
      ellipsis: {
        showTitle: false,
      },
      render: (ownerName) => (
        <Tooltip placement="topLeft" title={ownerName}>
          {ownerName}
        </Tooltip>
      ),
    },
    {
      title: t('history.appraiser'),
      dataIndex: ['product','appraiser'],
      key: 'product.appraiser',
      width:160,
      fixed:'left',
      ellipsis: {
        showTitle: false,
      },
      render: (appraiser) => (
        <Tooltip placement="topLeft" title={appraiser}>
          {appraiser}
        </Tooltip>
      ),
    },
    {
      title: t('history.nameCn'),
      dataIndex: ['product','nameCn'],
      key: 'product.nameCn',
      width:80,
      fixed:'left',
      ellipsis: {
        showTitle: false,
      },
      render: (nameCn) => (
        <Tooltip placement="topLeft" title={nameCn}>
          {nameCn}
        </Tooltip>
      ),
    },
    {
      title: t('history.nameEn'),
      dataIndex: ['product','nameEn'],
      key: 'product.nameEn',
      width:100,
      fixed:'left',
      ellipsis: {
        showTitle: false,
      },
      render: (nameEn) => (
        <Tooltip placement="topLeft" title={nameEn}>
          {nameEn}
        </Tooltip>
      ),
    },
    {
      title: t('history.maxDoseLeaveon'),
      dataIndex: 'maxDoseLeaveon',
      key: 'maxDoseLeaveon',
      width:160,
      fixed:'left',
      render: (text, record) => {
        return <Button type='link' href={record.remark}>{t('download')}</Button>
      }
    },
  ];


  const getData = async (formData) => {
    const { success, data} = await reportLists({...formData, orderby: 'b.update_time', order: 0})
    if(!success) return false
    console.log(data)
    const list = data.data.page
    list.forEach(element => {
      let rmk = element.remark
      rmk = rmk.replace("api","res-dir")
      element.remark=rmk
    }); 
    return {
      data: list,
      total: data.data.total
    }
  } 
  
  return (
    <MemoTable 
      name='basic'
      formColumns={formColumns}
      columns={columns as any}
      rowKey='id'
      getData={getData}
      refreshKey={onReloadNum}
    />
  )
}
export default History
